<template>
  <div v-if="cartPop" class="modal">
    <div class="modal-content">
      <div class="content-area" :style="!defaultVal ? `min-height : 348px;` : ''">
        <div class="address-area">
          <div class="head-sty">
            <div class="title">
              {{
                defaultVal ? $t("event.add_title") : $t("event.discountDetails")
              }}
            </div>
            <Icon type="md-close" v-if="defaultVal" @click="closeBtn" size="32" color="#242424"
              style="cursor: pointer" />
            <Icon type="md-close" v-else @click="changeBtn" size="32" color="#242424" style="cursor: pointer" />
          </div>
          <!-- 有地址 -->
          <!-- <div class="address-info" v-if="defaultVal && Object.keys(currentAddr).length > 0" @click="editSelect">
            <div style="display: flex; gap: 20px; align-items: center">
              <img src="@/assets/images/activity/address.png" class="address-icon" alt="" />
              <div class="info-label">
                <div class="name">
                  {{ currentAddr.name }} {{ currentAddr.surname }}
                </div>
                <div class="phone">
                  <span>
                    {{
                      currentAddr.regionCode
                        ? `+${currentAddr.regionCode}`
                        : currentAddr.regionCode
                    }}
                    {{ phoneHide(currentAddr.mobile) }}
                  </span>
                  {{ currentAddr.postalCode }}
                </div>
                <div class="info-text">
                  {{ currentAddr.countryText }} {{ currentAddr.provinceText }}
                  {{ currentAddr.cityText }} {{ currentAddr.areaText }}
                  {{ currentAddr.addressDetail }}
                </div>
              </div>
            </div>
            <Icon type="ios-arrow-forward" size="42" color="#333333" style="cursor: pointer" />
          </div> -->
          <!-- 无地址 -->
          <!-- <div class="no-address" v-if="defaultVal && Object.keys(currentAddr).length == 0">
            <img src="@/assets/images/activity/add.png" @click="editAddress" class="add-icon" alt="" />
            <div class="add-tips">{{ $t("event.add_title_text") }}</div>
          </div> -->
        </div>
        <!-- 间隔 -->
        <div class="gap-rect" v-if="defaultVal"></div>
        <div class="head">
          <div class="head-left">
            <div class="title" v-if="defaultVal">Event Cart</div>
            <div class="offers-rect" @click="lookBtn" v-if="
              defaultVal &&
              loading == false &&
              totalSavings &&
              totalSavings !== 0
            ">
              <div class="label-text">
                Discounted: <span> -¥{{ totalSavings || "--" }}</span>
                <Icon type="ios-arrow-down" style="margin-left: 8px"></Icon>
              </div>
            </div>
          </div>
          <div class="head-right">
            <div class="delete-text" v-if="defaultVal && loading == false" @click="isRemovePop = true">
              Delete selected
            </div>
          </div>
        </div>
        <div class="detail-content" v-if="defaultVal && loading == false">
          <div class="table-content">
            <div class="table-tr" v-if="effectiveList.length > 0" :style="styleObject">
              <div class="table-body" v-for="subItem in effectiveList" :key="subItem.id">
                <Row :gutter="24">
                  <Col span="6">
                  <div class="td vertical-sty">
                    <Checkbox v-model="subItem.active" @on-change="onSelectGoods(subItem)" class="box"></Checkbox>
                    <img :src="subItem.mainImg" class="img-sty" alt="" />
                  </div>
                  </Col>
                  <!-- 信息 -->
                  <Col span="6">
                  <div class="td">
                    <div class="title">
                      {{ subItem.subject }}
                    </div>
                    <div class="intro" v-for="attributeItem in subItem.skuAttrEnumFormatList" :key="attributeItem.id">
                      <div class="intro-text">
                        {{ attributeItem.name }}：{{ attributeItem.value }}
                      </div>
                    </div>
                  </div>
                  </Col>
                  <!-- 数量 -->
                  <Col span="6">
                  <div class="td">
                    <InputNumber @on-change="onCartEdit(subItem)" class="quantity-sty"
                      :min="subItem.startQuantity ? subItem.startQuantity : 1" v-model="subItem.quantity"
                      controls-outside size="large"></InputNumber>
                  </div>
                  </Col>
                  <!-- 价格 -->
                  <Col span="5" style="padding: 0">
                  <div class="td align-sty">
                    <div class="original-price">Unit Price</div>
                    <div class="discounted-price">
                      ¥ {{ subItem.originalPriceCNY }}
                    </div>
                  </div>
                  </Col>
                </Row>
              </div>
            </div>
            <!-- 空 -->
            <div v-else class="no-data-text">{{ $t("public.buyChat") }}</div>
            <Divider v-if="expireList.length > 0" />
            <!-- 失效商品 -->
            <div class="title-sty" v-if="expireList.length > 0">
              <div class="title">Expired items</div>
              <div class="clear-text" @click="clearBtn">
                {{ $t("event.clearExpiredItems") }}
              </div>
            </div>
            <div class="table-tr" v-if="expireList.length > 0" style="
                opacity: 0.6;
                height: 120px;
                overflow-y: scroll;
                overflow-x: hidden;
              ">
              <div class="table-body" v-for="item in expireList" :key="item.id">
                <Row :gutter="24">
                  <Col span="6">
                  <div class="td vertical-sty">
                    <Checkbox v-model="item.active" disabled class="box"></Checkbox>
                    <img :src="item.mainImg" class="img-sty" alt="" />
                  </div>
                  </Col>
                  <!-- 信息 -->
                  <Col span="6">
                  <div class="td">
                    <div class="title">
                      {{ item.subject }}
                    </div>
                    <div class="intro" v-for="attributeItem in item.skuAttrEnumFormatList" :key="attributeItem.id">
                      <div class="intro-text">
                        {{ attributeItem.name }}：{{ attributeItem.value }}
                      </div>
                    </div>
                  </div>
                  </Col>
                  <!-- 数量 -->
                  <Col span="6">
                  <!-- <div class="td">
                    <InputNumber @on-change="onCartEdit(item)" class="quantity-sty"
                      :min="item.startQuantity ? item.startQuantity : 1" v-model="item.quantity"
                      controls-outside size="large"></InputNumber>
                  </div> -->
                  </Col>
                  <!-- 价格 -->
                  <Col span="5" style="padding: 0">
                  <div class="td align-sty">
                    <div class="original-price">Unit Price</div>
                    <div class="discounted-price">
                      ¥ {{ item.originalPriceCNY }}
                    </div>
                  </div>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </div>
        <t-loading v-if="loading"></t-loading>
        <div class="detail-content" v-else-if="!defaultVal && loading == false">
          <div class="list-fee">
            <div class="label">{{ $t("event.itemsSubtotal") }}</div>
            <div class="value">¥ {{ itemsSubTotal || "--" }}</div>
          </div>
          <div class="list-fee">
            <div class="label">{{ $t("event.totalSavings") }}</div>
            <div class="value-text">-¥ {{ totalSavings || "--" }}</div>
          </div>
          <div class="list-fee">
            <div class="label">{{ $t("event.totalAfterDiscount") }}</div>
            <div class="value">¥ {{ totalAfterDiscount || "--" }}</div>
          </div>
        </div>
      </div>
      <div class="payment-sty">
        <div class="hover-sty">
          <div class="cart-area">
            <Badge :count="shopCartItemCount">
              <img src="@/assets/images/activity/cart.png" class="cart-icon" alt="" />
            </Badge>
          </div>
        </div>
        <div class="info-fee">
          <div class="amount">
            <div class="label">{{ $t("event.itemsSubtotal") }}</div>
            <div class="value">¥ {{ totalAfterDiscount || "--" }}</div>
          </div>
          <div class="freight">
            <div class="label">{{ $t("event.ship_fee_label") }}</div>
            <div class="value">¥ {{ expressFee || 0 }}</div>
          </div>
        </div>
        <div class="pay-btn" @click="payBtn">
          {{ $t("event.payBtn") }} {{ userInfo.currencySymbol }}
          {{ payFee || "--" }}
        </div>
      </div>
    </div>
    <!-- 确认移除弹框 -->
    <Modal v-model="isRemovePop" width="30" :mask-closable="false" class-name="vertical-center-modal" :closable="false">
      <div slot="header"></div>
      <div class="content-text">{{ $t("event.selectedItemsCart") }}</div>
      <div slot="footer" class="footer-bot">
        <div></div>
        <div class="btn-sty">
          <div class="cancel-text" @click="isRemovePop = false">Cancel</div>
          <div class="remove-btn" @click="removeMet">Remove</div>
        </div>
      </div>
    </Modal>
    <!-- 地址编辑弹框 -->
    <add-address-pop ref="addressRef" @on-change="onSelectAddr"></add-address-pop>
  </div>
</template>
<script>
import TLoading from "@/components/t-loading";
import { mapState } from "vuex";
import { debounce } from "@/common/common";
import { doubleCartEdit } from "@/api/activity";
import { cartDeleteBatch } from "@/api/cart";
import addAddressPop from "./add-address-pop.vue";
import { phoneHide } from "@/common/common";
export default {
  props: [
    "currentAddr",
    "effectiveList",
    "expireList",
    "itemsSubTotal",
    "totalAfterDiscount",
    "expressFee",
    "payFee",
    "shopCartItemCount",
    "totalSavings",
  ],
  components: { addAddressPop, TLoading },
  data() {
    return {
      phoneHide,
      cartPop: false,
      loading: false,
      defaultVal: true, //默认展示购物车，false显示详情
      isRemovePop: false,
      userAddressList: [],
      addressId: "", // 选择收货地址
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userLanguage: (state) => state.user.userLanguage,
    }),
    styleObject() {
      return {
        height: this.expireList.length > 0 ? "230px" : "330px",
        "overflow-y": "scroll",
        "overflow-x": "hidden",
      };
    },
  },
  methods: {
    open() {
      this.cartPop = true;
    },
    // 关闭弹窗
    closeBtn() {
      this.cartPop = false;
      this.$emit("showCartMet", false); //显示购物车
    },
    changeBtn() {
      this.defaultVal = true;
    },
    // 编辑数量
    onCartEdit(info) {
      doubleCartEdit({
        channel: info.channel,
        id: info.id, // 主键
        spuNo: info.spuNo, // SPU产品编号
        quantity: info.quantity, // 数量，必填
        skuNo: info.skuNo, // 系统商品编号/货号：系统唯一
      }).then((res) => {
        this.$emit("editUpdateMet", res);
      });
    },
    // 勾选商品
    onSelectGoods(info) {
      doubleCartEdit({
        isSelected: info.active == true ? 1 : 0,
        channel: info.channel,
        id: info.id, // 主键
        spuNo: info.spuNo, // SPU产品编号
        quantity: info.quantity, // 数量，必填
        skuNo: info.skuNo, // 系统商品编号/货号：系统唯一
      }).then((res) => {
        this.$emit("editUpdateMet", res);
      });
    },
    // 去支付
    payBtn: debounce(function () {
      this.cartPop = false;
      this.$emit("payMet"); //购物车点击支付
    }),
    // 查看优惠详情
    lookBtn() {
      this.defaultVal = false; //优惠详情
    },
    // 清空失效商品
    clearBtn() {
      this.loading = true;
      let cardIds = [];
      this.expireList.forEach((item) => {
        cardIds.push(item.id);
      });
      cartDeleteBatch(cardIds).then(() => {
        this.loading = false;
        this.$Message.success(this.$t("user.successfullyDeleted"));
        this.$emit("updateMet"); //更新列表
      });
    },
    // 从购物车移出商品
    removeMet() {
      this.loading = true;
      let cardIds = [];
      this.effectiveList.forEach((item) => {
        if (item.isSelected === 1) {
          cardIds.push(item.id);
        }
      });
      cartDeleteBatch(cardIds).then(() => {
        this.loading = false;
        this.$Message.success(this.$t("user.successfullyDeleted"));
        this.isRemovePop = false;
        this.$emit("updateMet"); //更新列表
      });
    },
    editAddress() {
      this.$refs.addressRef.open();
    },
    editSelect() {
      this.$refs.addressRef.openSelect();
      this.$refs.addressRef.getAddressList();
    },
    onSelectAddr(info) {
      this.$emit("onSelectAddr", info);
    },
  },
};
</script>

<style lang="less" scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

  .modal-content {
    width: 35.3%;
    position: fixed;
    bottom: 42px;

    .content-area {
      min-height: 548px;
      background: #ffffff;
      border-radius: 32px 32px 0 0;
      padding: 20px 0;

      .address-area {
        margin: 0 30px;
        padding-bottom: 21px;

        .head-sty {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32px;
            color: #1e1714;
            line-height: 38px;
          }
        }

        .address-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
          cursor: pointer;
          margin-top: 14px;

          .address-icon {
            width: 48px;
            height: 48px;
          }

          .info-label {
            display: flex;
            flex-direction: column;
            justify-content: start;

            .name {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 20px;
              color: #1e1714;
              line-height: 23px;
            }

            .phone {
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 17px;
              color: #aeb0b9;
              line-height: 20px;
              display: inline-flex;
              align-items: center;
              gap: 10px;
            }

            .info-text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 17px;
              color: #aeb0b9;
              line-height: 18px;
            }
          }
        }

        .no-address {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 24px;

          .add-icon {
            width: 62px;
            height: 62px;
            cursor: pointer;
          }

          .add-tips {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 17px;
            color: #aeb0b9;
            line-height: 20px;
          }
        }
      }

      .gap-rect {
        height: 10px;
        background: #f5f6fa;
      }

      .head {
        margin: 0 30px;
        padding-top: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .head-left {
          display: flex;
          align-items: center;
          gap: 15px;

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32px;
            color: #1e1714;
            line-height: 38px;
          }

          .offers-rect {
            background: #f7f9fc;
            border-radius: 50px;

            .label-text {
              padding: 5px 13px;
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 15px;
              color: #767b93;
              line-height: 18px;
              cursor: pointer;

              span {
                color: #ff186b;
              }
            }
          }
        }

        .head-right {
          display: flex;
          align-items: center;
          gap: 15px;

          .delete-text {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 17px;
            color: #aeb0b9;
            line-height: 20px;
            cursor: pointer;
          }
        }
      }

      .detail-content {
        margin: 0 30px;
        // margin-bottom: 42px;

        .table-content {
          .no-data-text {
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 18px;
            color: #1e1714;
            line-height: 21px;
            height: 320px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .table-tr {
            .table-body {
              .td {
                margin-top: 24px;

                .img-sty {
                  width: 120px;
                  height: 120px;
                  border-radius: 8px 8px 8px 8px;
                  border: 1px solid #e9eaf3;
                }

                .title {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 18px;
                  color: #1e1714;
                  line-height: 21px;
                  white-space: pre-line;
                  /*允许换行*/
                  overflow: hidden;
                  text-overflow: ellipsis;
                  /*省略号*/
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  /*行向垂直排列*/
                  -webkit-line-clamp: 1; //*限制2
                }

                .intro {
                  font-family: PingFang TC, PingFang TC;
                  font-weight: 400;
                  font-size: 15px;
                  color: #aeb0b9;
                  line-height: 18px;
                  margin-top: 8px;
                }

                .ivu-input-number {
                  border: 1px solid #e9eaf3;
                }

                .original-price {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 17px;
                  color: #aeb0b9;
                  line-height: 19px;
                  margin-top: 50px;
                }

                .discounted-price {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  font-size: 20px;
                  color: #fe3161;
                  line-height: 23px;
                  margin-top: 12px;
                }

                .quantity-sty {
                  margin-top: 30px;
                }
              }

              .vertical-sty {
                display: flex;
                align-items: center;
              }

              .align-sty {
                text-align: right;
              }
            }
          }

          .title-sty {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
              font-family: Open Sans, Open Sans;
              font-weight: 600;
              font-size: 18px;
              color: #1e1714;
              line-height: 21px;
            }

            .clear-text {
              font-family: Open Sans, Open Sans;
              font-weight: 400;
              font-size: 17px;
              color: #aeb0b9;
              line-height: 20px;
              cursor: pointer;
            }
          }
        }

        .list-fee {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 24px;

          .label {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28px;
            color: #1e1714;
            line-height: 33px;
          }

          .value {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28px;
            color: #1e1714;
            line-height: 33px;
          }

          .value-text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 28px;
            color: #ff186b;
            line-height: 33px;
          }
        }
      }
    }

    .payment-sty {
      width: 110%;
      padding: 16px 28px 16px 17px;
      background: #ffffff;
      border-radius: 18px 18px 18px 18px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 25px;
      position: relative;
      // top: -60px;
      left: -40px;

      &::before {
        /* 1 */
        display: block;
        content: "";
        border-radius: 18px;
        border: 8px solid transparent;
        background: linear-gradient(132deg,
            #E82C58, #53FFDE,
            #A638FF) border-box;
        /* 2 */
        -webkit-mask: linear-gradient(#fff 0 0) padding-box,
          linear-gradient(#fff 0 0);
        /* 3 */
        -webkit-mask-composite: xor;
        /* 4 */
        mask-composite: exclude;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .hover-sty {
        width: 138px;
        height: 77px;
        border-right: 1px solid #e9eaf3;
        border-radius: 6px 6px 6px 6px;
        display: flex;
        justify-content: center;
        align-items: center;

        .cart-area {
          width: 138px;
          height: 77px;
          border-radius: 6px 6px 6px 6px;
          z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .cart-icon {
            width: 45px;
            height: 45px;
          }
        }
      }

      .cart-area:hover {
        background: #e0fffc;
      }

      .info-fee {
        margin-right: 10px;

        .amount {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 44px;

          .label {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 16px;
            color: #1c1548;
            line-height: 19px;
          }

          .value {
            font-family: Open Sans, Open Sans;
            font-weight: bold;
            font-size: 20px;
            color: #ff186b;
            line-height: 23px;
          }
        }

        .freight {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 44px;
          margin-top: 8px;

          .label {
            font-family: Open Sans, Open Sans;
            font-weight: 400;
            font-size: 16px;
            color: #1c1548;
            line-height: 19px;
          }

          .value {
            font-family: Open Sans, Open Sans;
            font-weight: 600;
            font-size: 16px;
            color: #1c1548;
            line-height: 19px;
          }
        }
      }

      .pay-btn {
        padding: 13px 22px;
        background: #1e1714;
        border-radius: 15px 15px 15px 15px;
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 20px;
        color: #ffffff;
        line-height: 23px;
        z-index: 2;
        cursor: pointer;
      }
    }
  }
}

:deep(.ivu-modal-content) {
  border-radius: 18px;
  background: linear-gradient(181deg, #ffb6cc 0%, #ffffff 50%);
}

:deep(.ivu-modal-header) {
  border: none;
  padding: 28px 32px;
}

:deep(.ivu-modal-body) {
  padding: 0 32px;
}

:deep(.ivu-modal-footer) {
  border: none;
  padding: 28px 32px;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .content-text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #1e1714;
    line-height: 23px;
    text-align: center;
  }

  .footer-bot {
    display: flex;
    justify-content: end;
    align-items: center;

    .btn-sty {
      display: flex;
      align-items: center;
      gap: 32px;

      .cancel-text {
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 20px;
        color: #1e1714;
        line-height: 23px;
        cursor: pointer;
      }

      .remove-btn {
        padding: 10px 18px;
        background: #fe3161;
        border-radius: 16px;
        font-family: Open Sans, Open Sans;
        font-weight: 600;
        font-size: 20px;
        color: #ffffff;
        line-height: 23px;
        cursor: pointer;
      }
    }
  }
}
</style>
